<template>
  <a-card :bordered="false" class="addOrder">
    <el-page-header @back="$router.go(-1)" style="margin-bottom:10px"></el-page-header>
    <el-form
      :model="ruleForm"
      :rules="rules"
      ref="ruleForm"
      :labelWidth="labelWidth"
      class="demo-ruleForm"
    >
      <com-title :styleIng="{margin:'10px 0px 10px 10px;'}" :isShow="false">
        <span slot="title">{{!status?'已完成':'待出库'}}</span>
        <el-row :gutter="10" slot="table">
          <el-col :md="8">
            <el-form-item>
              <h3 slot="label">出库编号：</h3>
              <h3>{{info.outStockId}}</h3>
            </el-form-item>
          </el-col>
          <el-col :md="8">
            <el-form-item>
              <h3 slot="label">创单人：</h3>
              <h3>{{info.operatorId}}</h3>
            </el-form-item>
          </el-col>
          <el-col :md="8">
            <el-form-item>
              <h3 slot="label">制单时间：</h3>
              <h3>{{info.createTime}}</h3>
            </el-form-item>
          </el-col>
          <el-col :md="8">
            <el-form-item>
              <h3 slot="label">总仓退货入库单：</h3>
              <h3>{{info.dh}}</h3>
            </el-form-item>
          </el-col>
        </el-row>
      </com-title>

      <com-title :styleIng="{margin:'10px 0px 10px 10px'}" :isShow="false" v-if="status">
        <span slot="title">出库信息</span>
        <el-row :gutter="10" slot="table">
          <el-col :md="12">
            <el-form-item>
              <h3 slot="label">出库方：</h3>
              <h3>{{info.order}}</h3>
            </el-form-item>
          </el-col>
          <el-col :md="12">
            <el-form-item>
              <h3 slot="label">出库状态：</h3>
              <h3>{{info.status |status}}</h3>
            </el-form-item>
          </el-col>
          <el-col :md="12">
            <el-form-item>
              <h3 slot="label">联系电话：</h3>
              <h3>{{info.dh}}</h3>
            </el-form-item>
          </el-col>
          <el-col :md="12">
            <el-form-item>
              <h3 slot="label">出库时间：</h3>
              <h3>{{info.outStockTime}}</h3>
            </el-form-item>
          </el-col>
          <el-col :md="24">
            <el-form-item>
              <h3 slot="label">联系人：</h3>
              <h3>{{info.lxr}}</h3>
            </el-form-item>
          </el-col>
          <el-col :md="12">
            <el-form-item>
              <h3 slot="label">出库地址：</h3>
              <h3>{{info.ckdz}}</h3>
            </el-form-item>
          </el-col>
        </el-row>
      </com-title>

      <!-- 门店信息 -->
      <com-title :styleIng="{margin:'10px 0px 10px 10px'}" :isShow="false" v-if="!status">
        <span slot="title">门店信息</span>
        <el-row :gutter="10" slot="table">
          <el-col :md="12">
            <el-form-item>
              <h3 slot="label">门店名称：</h3>
              <h3>{{info.shopName}}</h3>
            </el-form-item>
          </el-col>
          <el-col :md="12">
            <el-form-item>
              <h3 slot="label">出库日期：</h3>
              <h3>{{info.outStockTime}}</h3>
            </el-form-item>
          </el-col>
          <el-col :md="12">
            <el-form-item>
              <h3 slot="label">联系电话：</h3>
              <h3>{{info.shopPhone}}</h3>
            </el-form-item>
          </el-col>
          <el-col :md="12">
            <el-form-item>
              <h3 slot="label">出库凭证：</h3>
              <el-image
                style="width: 100px; height: 100px"
                :src="info.outStockCert"
                :preview-src-list="[info.outStockCert]"
              ></el-image>
            </el-form-item>
          </el-col>
          <el-col :md="12">
            <el-form-item>
              <h3 slot="label">联系人：</h3>
              <h3>{{info.shopPersonName}}</h3>
            </el-form-item>
          </el-col>
          <el-col :md="12">
            <el-form-item>
              <h3 slot="label">地址：</h3>
              <h3>{{info.shopAddress}}</h3>
            </el-form-item>
          </el-col>
          <el-col :md="12">
            <el-form-item>
              <h3 slot="label">备注：</h3>
              <h3>{{info.remarks}}</h3>
            </el-form-item>
          </el-col>
        </el-row>
      </com-title>

      <!-- 接收方信息 -->
      <com-title :styleIng="{margin:'10px 0px 10px 10px'}" :isShow="false">
        <span slot="title">接收方信息</span>
        <el-row :gutter="10" slot="table">
          <el-col :md="12">
            <el-form-item>
              <h3 slot="label">总仓名称：</h3>
              <h3>{{info.platformName}}</h3>
            </el-form-item>
          </el-col>
          <el-col :md="12">
            <el-form-item>
              <h3 slot="label">联系电话：</h3>
              <h3>{{info.platformPhone}}</h3>
            </el-form-item>
          </el-col>
          <el-col :md="12">
            <el-form-item>
              <h3 slot="label">联系人：</h3>
              <h3>{{info.platformPersonName}}</h3>
            </el-form-item>
          </el-col>
          <el-col :md="12">
            <el-form-item>
              <h3 slot="label">地址：</h3>
              <h3>{{info.platformAddress}}</h3>
            </el-form-item>
          </el-col>
        </el-row>
      </com-title>

      <!-- 商品明细 -->
      <com-title :styleIng="{margin:'10px 0px 10px 10px'}" :isShow="false">
        <span slot="title">
          <span>商品明细</span>
        </span>
        <buyingIfor slot="table" ref="buyingIfor" style="margin:10px 0px 10px 10px" />
      </com-title>

      <!-- 退货出库信息 -->
      <!-- <com-title :styleIng="{margin:'10px 0px 10px 10px'}" :isShow="false" v-if="status">
        <span slot="title">
          <span>退货出库信息</span>
        </span>
        <div slot="table">
          <el-row :gutter="10" slot="table" style="background:#eee">
            <el-col :md="12">
              <el-form-item>
                <h3 slot="label">退货出库单号：</h3>
                <h3>{{info.order}}</h3>
              </el-form-item>
            </el-col>
            <el-col :md="12">
              <el-form-item>
                <h3 slot="label">出库单制单时间：</h3>
                <h3>{{info.ruku}}</h3>
              </el-form-item>
            </el-col>
            <el-col :md="6">
              <el-form-item>
                <h4 slot="label">供应商名称/总仓：</h4>
                <h3>{{info.order}}</h3>
              </el-form-item>
            </el-col>
            <el-col :md="6">
              <el-form-item>
                <h4 slot="label">联系电话：</h4>
                <h3>{{info.order}}</h3>
              </el-form-item>
            </el-col>
            <el-col :md="6">
              <el-form-item>
                <h4 slot="label">联系人：</h4>
                <h3>{{info.order}}</h3>
              </el-form-item>
            </el-col>
            <el-col :md="6">
              <el-form-item>
                <h4 slot="label">地址：</h4>
                <h3>{{info.order}}</h3>
              </el-form-item>
            </el-col>
          </el-row>
          <returnInfo ref="returnInfo" style="margin:10px 0px 10px 10px" />
        </div>
      </com-title> -->
      <div class="content">
        <!-- <a-button type="primary" @click="submitSave('ruleForm')">入库</a-button> -->
        <a-button @click="quxiao('ruleForm')">返回</a-button>
      </div>
    </el-form>
    <choiceShop ref="choiceShop" @trigger="trigger" />
  </a-card>
</template>

<script src='./index.js'></script>

<style lang="less">
.addOrder {
  .content {
    text-align: center;
    margin: 20px 0px;
    button {
      margin-right: 10px;
    }
  }
}
.upload_list {
  & > div {
    float: left;
    margin-right: 10px;
    & > .imgs {
      width: 150px;
      height: 130px;
      border-top-left-radius: 4px;
      border-top-right-radius: 4px;
    }
    & > div {
      width: 150px;
      margin-bottom: 0;
      text-align: center;
      background-color: #fafafa;
      display: flex;
      justify-content: center;

      span {
        padding-right: 10px;
        cursor: pointer;
      }
    }
  }
  .avatar-uploader {
    float: left;
  }
}
</style>
